<template>
  <div class="vuex">
    状态机
    <br />
    <p>state的数据:{{ $store.state.msg }}</p>

    <p>state的数据:{{ $store.state.num }}</p>

    <p>geters的数据:{{ $store.getters.changeNum }}</p>

    <el-button @click="changeNum">触发mutation改变状态机num</el-button>
    <el-button @click="changeMsg">触发action改变状态机msg</el-button>
    <br>
    <br>
    <br>
    <br>
    <h1>abc模块状态机</h1>

    <p>{{$store.state.abc.msg}}</p>

    <el-button type='warning' @click="changeabc">改变abc状态机的msg</el-button>

    <p>-------------render配置储存的数据--------------</p>

    <el-dialog title="预览" :visible.sync="showForm">
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="render-form">
        <Render :style="{ width: item.obj.elementWidth }" v-for="(item, index) in dynamicValidateForm.sortable_item" :index='index' :key="index + 1" :ele="item.ele" :obj="item.obj" />
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showForm = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>

    <el-button-group class="btn-group">
      <el-button class="el-icon-circle-check" type="primary" @click="showForm=true">预览</el-button>
    </el-button-group>

  </div>
</template>

<script>
import Render from "@/views/render/render";

export default {
  data() {
    return {
      dynamicValidateForm: {},
      showForm: false,

    }

  },
  components:{Render},
  created() {
    console.log(this.$store);
    this.dynamicValidateForm = this.$store.state.render_store.dynamicValidateForm
  },
  mounted() {
    console.log(this.$store);
    console.log(this);

  },
  methods: {
    sure() {
      this.$refs.dynamicValidateForm.validate((valid) => {
        console.log(valid);
      });
    },
    changeMsg() {
      this.$store.dispatch("changeMsg");
    },
    changeNum() {
      this.$store.commit("changeNum",{name:"deng"});
      // this.$store.commit({ type: "changeNum", name: "deng" });
      // this.$store.state.num++//不建议这样用
    },
    changeabc() {
      this.$store.commit("abc/changeMsg")
    }
  },
};
</script>

<style lang="scss" scoped></style>
